<template>
  <div class="_card">
    <div class="wrapper">
      <div class="card">
        <div class="card__year">内容</div>
        <div class="card__cometOuter">
          <div class="card__comet"></div>
          <div class="card__comet card__comet--second"></div>
        </div>
        <div class="card__circle"></div>
        <div class="card__smallCircle"></div>
        <div class="card__orangeShine"></div>
        <div class="card__greenShine"></div>
        <div class="card__thankyou">thank<br />you!</div>
        <div class="card__outer-year">
          <span>2</span>
          <span>0</span>
          <span>1</span>
          <span>7</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "card",
  mounted() {
    var $circle = document.querySelector(".card__circle");
    var $smallCircle = document.querySelector(".card__smallCircle");
    var $year = document.querySelector(".card__year");
    var $card = document.querySelector(".card");
    var $cardOrangeShine = document.querySelector(".card__orangeShine");
    var $cardThankYou = document.querySelector(".card__thankyou");
    var $cardComet = document.querySelector(".card__cometOuter");

    var generateTranslate = function generateTranslate(el, e, value) {
      el.style.transform =
        "translate(" + e.clientX * value + "px, " + e.clientY * value + "px)";
    };
    // http://stackoverflow.com/a/1480137
    var cumulativeOffset = function cumulativeOffset(element) {
      var top = 0,
        left = 0;
      do {
        top += element.offsetTop || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
      } while (element);

      return {
        top: top,
        left: left,
      };
    };
    document.onmousemove = function (event) {
      console.log(cumulativeOffset($card));
      var e = event || window.event;
      var x = ((e.pageX - cumulativeOffset($card).left - 350 / 2) * -1) / 100;
      var y = ((e.pageY - cumulativeOffset($card).top - 350 / 2) * -1) / 100;

      var matrix = [
        [1, 0, 0, -x * 0.00005],
        [0, 1, 0, -y * 0.00005],
        [0, 0, 1, 1],
        [0, 0, 0, 1],
      ];

      generateTranslate($smallCircle, e, 0.03);
      generateTranslate($cardThankYou, e, 0.03);
      generateTranslate($cardOrangeShine, e, 0.09);
      generateTranslate($circle, e, 0.05);
      generateTranslate($year, e, 0.03);
      generateTranslate($cardComet, e, 0.05);

      $card.style.transform = "matrix3d(" + matrix.toString() + ")";
    };
    // console.log(
    //   "\u002f\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u000d\u000a\u0020\u002a\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u002a\u0009\u0009\u000d\u000a\u0020\u002a\u0020\u0009\u0009\u0009\u0009\u0009\u0009\u0020\u0020\u0020\u0020\u0020\u0020\u4ee3\u7801\u5e93\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u002a\u000d\u000a\u0020\u002a\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0077\u0077\u0077\u002e\u0064\u006d\u0061\u006b\u0075\u002e\u0063\u006f\u006d\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u002a\u000d\u000a\u0020\u002a\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0009\u0009\u0020\u0020\u52aa\u529b\u521b\u5efa\u5b8c\u5584\u3001\u6301\u7eed\u66f4\u65b0\u63d2\u4ef6\u4ee5\u53ca\u6a21\u677f\u0009\u0009\u0009\u002a\u000d\u000a\u0020\u002a\u0020\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u002a\u000d\u000a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002f"
    // );
  },
};
</script>

<style lang="scss">
._card {
  body {
    background-color: #fff;
  }
  .wrapper {
    position: absolute;
    margin: -171px 0 0 -327.5px;
    left: 50%;
    top: 50%;
    height: 342px;
    width: 655px;
  }
  .card {
    background-image: url(../assets/2017_bg.png);
    background-size: cover;
    width: 655px;
    height: 342px;
    border-radius: 5px;
    position: absolute;
    box-shadow: -20px 30px 116px 0 rgba(92, 15, 15, 0.54);
    overflow: hidden;
    z-index: 4;
  }
  .card__orangeShine,
  .card__greenShine {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .card__orangeShine {
    background-image: url(../assets/orange_shine.png);
    right: -150px;
    top: -90px;
    bottom: 50px;
    z-index: 2;
    width: 570px;
    height: 500px;
  }
  .card__greenShine {
    background-image: url(../assets/green_shine.png);
    left: 20%;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 400px;
  }
  .card__year {
    font-family: "Oswald", sans-serif;
    text-align: center;
    color: #fff;
    font-size: 110px;
    line-height: 110px;
    padding: 55px 0;
    font-weight: 100;
    position: relative;
    z-index: 2;
  }
  .card__thankyou {
    font-family: "Oswald", sans-serif;
    position: absolute;
    text-transform: uppercase;
    font-weight: 100;
    left: 33%;
    bottom: 20%;
    z-index: 2;
    color: #fff;
    letter-spacing: 5px;
    line-height: 17px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
  }
  .card__circle,
  .card__smallCircle {
    position: absolute;
    border-radius: 100%;
    background-image: -webkit-linear-gradient(329deg, #3b4576 0%, #242a48 59%);
    background-image: linear-gradient(-239deg, #3b4576 0%, #242a48 59%);
    box-shadow: -10px -15px 90px 0 #191c41;
    z-index: 2;
  }
  .card__circle {
    right: 68px;
    bottom: 34px;
    width: 230px;
    height: 230px;
  }
  .card__smallCircle {
    right: 40%;
    top: -7%;
    width: 50px;
    height: 50px;
  }
  .card__outer-year {
    font-family: "Orbitron";
  }
  .card__outer-year span {
    position: absolute;
    color: #fff;
    font-size: 16px;
    z-index: 4;
  }
  .card__outer-year span:nth-child(1):after,
  .card__outer-year span:nth-child(4):after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    border-bottom: 2px solid #fff;
  }
  .card__outer-year span:nth-child(1) {
    top: 35px;
    left: 35px;
  }
  .card__outer-year span:nth-child(2) {
    left: none;
    top: 35px;
    right: 35px;
  }
  .card__outer-year span:nth-child(3) {
    top: none;
    bottom: 35px;
    left: 35px;
  }
  .card__outer-year span:nth-child(4) {
    top: none;
    left: none;
    right: 35px;
    bottom: 35px;
  }
  .card__comet {
    position: relative;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 100%;
  }
  .card__cometOuter {
    position: absolute;
    top: 30%;
    left: 25%;
  }
  .card__comet--second {
    right: -30px;
    top: -15px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
  .card__comet:before,
  .card__comet:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: -webkit-linear-gradient(
      top,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 27%,
      rgba(255, 255, 255, 0) 100%
    );
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 27%,
      rgba(255, 255, 255, 0) 100%
    );
    border-radius: 20px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .card__comet:before {
    width: 18px;
    height: 70px;
    -webkit-transform-origin: -2px 13px;
    transform-origin: -2px 13px;
  }
  .card__comet:after {
    width: 12px;
    height: 80px;
    -webkit-transform-origin: 0px 8px;
    transform-origin: 0px 8px;
  }
  .source {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -30px;
    opacity: 0.5;
    font-size: 12px;
  }
  .source a {
    color: #000;
  }
}
</style>
